<template>
	<div>
		<div class="music2">
			<div class="music2_lef">
				<div class="lef_bg">
					<img src="../../assets/img/jjl.jpg"/>
				</div>
				<div class="opct">
					<img src="../../assets/img/heard.png"/>
				</div>
			</div>
			<div class="music2_rig">
				<div class="rig_top">				
					<p>我喜欢的音乐</p>
				</div>
				<br />
				<span class="rig_bot">新增14首</span>
				<div class="three">
					<img src="../../assets/img/three.png"/>
				</div>
			</div>
		</div>
		<div class="music2">
			<div class="music2_lef">
				<div class="lef_bg">
					<img src="../../assets/img/jjl.jpg"/>
				</div>
			</div>
			<div class="music2_rig">
				<div class="rig_top">
					<p>好听的中文</p>
				</div>
				<br />
				<span class="rig_bot">54首</span>
				<div class="three">
					<img src="../../assets/img/three.png"/>
				</div>
			</div>
		</div>
		<div class="music2">
			<div class="music2_lef">
				<div class="lef_bg">
					<img src="../../assets/img/jjl.jpg"/>
				</div>
			</div>
			<div class="music2_rig">
				<div class="rig_top">				
					<p>好听的英文</p>
				</div>
				<br />
				<span class="rig_bot">154首</span>
				<div class="three">
					<img src="../../assets/img/three.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped="scoped" lang="scss">
	.music2{
		width: 100%;
		height: 80px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		.music2_lef{
			width: 20%;
			display:flex;
			position: relative;
			justify-content: center;
			.lef_bg{
				height: 100%;
				width: 90%;
				position: absolute;
				transform: translateX(-50%);
				left: 50%;
				background-color: wheat;
				border-radius: 5px;
				overflow: hidden;
				img{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					height: 100%;
				}
			}
			.opct{
				height: 100%;
				width: 90%;
				background-color: black;
				border-radius: 5px;
				opacity: 0.6;
				img{
					width: 100%;
				}
			}
		}
		.music2_rig{
			width: 75%;
			border-bottom: 1px solid #eff0f1;
			flex-wrap: wrap;
			position: relative;
			.rig_top{
				p{
					display:flex;
					float: left;
					font-size: 20px;
					margin-top: 5px;
					span{
						color: #979798;
						margin-left: 5px;
						font-size: 14px;
						align-self: center;
					}
				}
			}
			.rig_bot{
				position: absolute;
				left: 0;
				bottom: 15px;
				color: #ccc;
				font-size: 14px;
			}
			.three{
				width: 30px;
				height: 30px;
				margin-right: 30px;
				float: right;
				img{
					height: 100%;
					transform: rotate(90deg);
				}
			}
		}
	}
</style>